当ブログサイト(DevelopersIO)におけるPWAサポート終了のおしらせ
当ブログサイト (DevelopersIO)では 2018年より プログレッシブ ウェブアプリ (PWA)をサポート。 記事表示の高速化手段として Service Worker のキャッシュを利用していました。
今回、Node18対応のため、パッケージのバージョンアップを含むメンテナンスを実施した後、意図したPWAのキャッシュが利用ができない事象が発生。 その対策として PWAのサポートを終了するに至った経緯について紹介させて頂きます。
発端
Nodeバージョンを16 → 18 への更新と、パッケージのバージョンアップのメンテナンスを実施しました。
| Name | Before | After |
|---|---|---|
| @nuxt/core | @2.12.2 | @2.16.3 |
| @nuxtjs/pwa | @3.0.0 | @3.3.5 |
| vue | @2.6.12 | @2.7.14 |
メンテナンス実施の翌日、ブログのトップページが更新されない報告があがりました。
ServiceWorker応答
- Date、Expiresとも前日のコンテンツが、ServiceWorkerのキャッシュ応答により表示される状態でした。
Webサーバからの応答
- キャッシュを迂回するスーパーリロードを行うと、正しい最新のコンテンツが取得できる状態でした。
原因
Nuxt関連パッケージの更新
revision 付与が 必須となる仕様変更を含むパッケージへのアップデートが原因でした。
キャッシュ設定
当サイトのサービスワーカーのキャッシュ設定はデフォルト。キャッシュの最大有効期限を明示しない状態で利用していた事で、サービスワーカーのキャッシュが長時間残りやすい状況に至ったと推測されます。
確認
対処方針を決定するため、PWA、サービスワーカーを撤去した検証環境となるサーバを用意。 Chromeブラウザの開発者ツールを利用して、JSファイルの転送時間を比較しました。
キャッシュなし
サービスワーカー、ブラウザキャッシュが共に機能しない場合、応答時間は200ms前後でした。
サービスワーカー
サービスワーカーのキャッシュが再利用された場合、応答時間は 4ms 前後でした
ブラウザキャッシュ
ブラウザキャッシュ、メモリキャッシュが再利用された場合、応答時間は 0ms と表示されました。
ディスクキャッシュが再利用された場合、6ms 前後でした。
ブラウザキャッシュ(メモリ) < サービスワーカー ≒ ブラウザキャッシュ (ディスク) <<< キャッシュなし との結果が得られました。
ブラウザキャッシュが十分に高速である事が確認できたため、 Service Worker を撤去、PWAサポートを終了する対策を取る事としました。
対処
フロントアプリケーション
nuxt.config.js から PWA設定を削除したアプリケーションをデプロイしました。
CloudFront設定
ブラウザから当サイトのサービスワーカーを削除するため、「https://dev.classmethod.jp」のレスポンスヘッダーに「Clear-Site-Data: "storage"」を付与する設定を行いました。
Behavior 「/」の レスポンスヘッダーポリシーとして設定しました。
JavaScriptを用いたサービスワーカーの解除方法について社内より情報提供を受けましたが、設定の簡易性、反映の確実性を優先し CloudFrontを利用する措置を取りました。
まとめ
正常動作しない サービスワーカーを読み込み 当サイトのトップページに古いコンテンツが表示されている場合、まずブラウザのスーパーリロード操作をお試しください。
スーパーリロードの効果がない場合、お手数ですがブラウザからサービスワーカーの解除をお試しください。
デベロッパーツールの Application - Cache - Cache Storage の該当部分を削除し、Application - Service Workers の該当部分を Unregister しました。
